<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <script>
    var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
      CSS.supports('top: constant(a)'))
    document.write(
      '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
      (coverSupport ? ', viewport-fit=cover' : '') + '" />')
  </script>
  <title>聊天室</title>
  <style>
	  *{
		  margin: 0;
		  padding: 0;
	  }
	  body{
		  background-color: #5e5e5e;
	  }
	  ::-webkit-scrollbar {
	  	width: 8px;
	  	height: 8px;
	  }
	  
	  ::-webkit-scrollbar-thumb {
	  	background-color: #d5d5d5;
	  	border-radius: 5px;
	  }
	  .page{
		  width: 70%;
		  height: 80vh;
		  background-color: #fff;
		  border-radius: 10px;
		  margin: 40px auto;
		  position: relative;
	  }
	  #sysMsg{
		  height: 50px;
		  border-bottom: 1px solid #ddd;
		  box-sizing: border-box;
		  font-size: 14px;
		  display: flex;
		  align-items: center;
		  padding: 10px;
	  }
	  .send-box{
		  width: 90%;
		  height: 36px;
		  border: 1px solid #ddd;
		  border-radius: 8px;
		  margin: 0 auto;
		  overflow: hidden;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		  box-sizing: border-box;
		  padding-right: 10px;
	  }
	  .send-box>input{
		  border: none;
		  outline: none;
		  width: 90%;
		  height: 100%;
		  box-sizing: border-box;
		  padding: 10px;
	  }
	  .send-box>img{
		  width: 26px;
		  cursor: pointer;
	  }
	  #content{
		  height: 85%;
		  box-sizing: border-box;
		  padding: 20px;
		  overflow-y: auto;
	  }
	.msg-box{
		display: flex;
		font-size: 13px;
		margin-bottom: 10px;
	}
	.msg-box-avatar{
		width: 40px;
		height: 40px;
		border-radius: 90%;
		background-color: #888;
		margin-right: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 16px;
	}
	.msg-box-name{
		color: #555;
	}
	.msg-box-msg{
		padding: 10px;
		border-radius: 6px;
		background-color: #eee;
		margin-top: 4px;
	}
	.msg-box-r{
		flex-direction:row-reverse;
		text-align: right;
	}
	.msg-box-r .msg-box-avatar{
		margin-left: 10px;
	}
  </style>
</head>
<body>
  <div class="page">
		<p id="sysMsg"></p>
	    <div id="content">
			<!-- <div class="msg-box">
				<div class="msg-box-avatar"></div>
				<div>
					<p class="msg-box-name">网友1</p>
					<p class="msg-box-msg">asdasdasd</p>
				</div>
			</div> -->
			<!-- <div class="msg-box msg-box-r">
				<div class="msg-box-avatar"></div>
				<div>
					<p class="msg-box-name">我</p>
					<p class="msg-box-msg">asdasdasd</p>
				</div>
			</div> -->
	    </div>
	  <div class="send-box">
	    <input placeholder="message" type="text" id="input">
		<img onclick="say()" src="/images/send.svg" alt="" />
	  </div>
  </div>
  <script src="/javascripts/jquery-2.1.3.min.js"></script>
  <script src="/javascripts/socket.io.min.js"></script>
  <script>
	  let name='未知';
	$.ajax('http://ip-api.com/json/?lang=zh-CN').then(res=>{
		console.log(res);
		name = res.regionName+','+res.query
	})


    const socket = io('ws://10.4.141.57:3000?roomid=1');
	   
    socket.on('message', function (data) {
      let html = document.createElement('p')
      document.getElementById('sysMsg').innerHTML= `系统消息：<span>${data.data}</span>`
      console.log(data);
    });
	$("#input").keyup(function(event) {
	    if (event.which === 13) {
			say()
		}
	});
    function say() {
      let t = document.getElementById('input').value
      if (!t) return
	  const data = { name:name,msg:t}
	  socket.emit('say', data);
      let html = `<div class="msg-box msg-box-r">
				<div class="msg-box-avatar">我</div>
				<div>
					<p class="msg-box-name">我</p>
					<p class="msg-box-msg">${t}</p>
				</div>
			</div>`
		$('#content').append(html)
	  document.getElementById('input').value=''
	   let scrollHeight = $('#content').prop("scrollHeight");
	        $('#content').scrollTop(scrollHeight,0);
    }
    socket.on('news', function (data) {
      // console.log(data);
	  const {name,msg} = data
      let html = `<div class="msg-box">
				<div class="msg-box-avatar">${name.charAt(0)}</div>
				<div>
					<p class="msg-box-name">${name}</p>
					<p class="msg-box-msg">${msg}</p>
				</div>
			</div>`
     $('#content').append(html)
	 let scrollHeight = $('#content').prop("scrollHeight");
	      $('#content').scrollTop(scrollHeight,0);
    });
  </script>
</body>
</html>